<template>
  <j-modal
    centered
    :title="name + '选择'"
    :width="'1200px'"
    :visible="visible"
    switchFullscreen
    :destroyOnClose="true"
    @ok="handleOk"
    @cancel="cancel"
    :footer="null"
    cancelText="关闭">
    <div slot="title" class="keymodal-title">
      <h3>{{name + '选择'}}</h3>
      <div class="tt-tips">
       
       <a-tooltip placement="bottomLeft" overlayClassName="cftips">
         <template slot="title">
           <div class="text" v-html="keyTips">
           </div>
         </template>
         <a-button type="link">键盘操作技巧 <a-icon type="question-circle" /></a-button>
       </a-tooltip>
      </div>
   </div>
    <a-row :gutter="18">
      <a-col :span="24">
        {{keyDownObj.autoHaoCaiIndex}}
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper" id="weicaiform">
          <a-form layout="inline">
            <a-row :gutter="24">
              
              <a-col :span="queryParamText.length>1?6:12" v-for="(list,index) in queryParamCode" :key="index">
                <a-form-item :label="(queryParamText[index]||name)">
                  <a-input v-model="queryParam[queryParamCode[index]||valueKey]" :placeholder="'请输入' + (queryParamText[index]||name)" @pressEnter="searchQuery"/>
                </a-form-item>
              </a-col>
              <a-col :span="6" v-if="$route.name == 'yaofang-pandian-kucunList'">
                <a-form-item label="零库存">
                  <j-dict-select-tag type="radio" v-model="queryParam.showZero" dictCode="show_zero" />
                </a-form-item>
              </a-col>
              
              <a-col :span="6">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search" :loading="loading">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" :loading="loading" style="margin-left: 8px">重置</a-button>
                  </span>
              </a-col>

            </a-row>
          </a-form>
        </div>

        <a-table
          size="middle"
          id="detailTable"
          bordered
          :rowKey="rowKey"
          :columns="innerColumns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          :rowSelection="seeDetail?null:{selectedRowKeys, getCheckboxProps,onChange: onSelectChange, type: multiple ? 'checkbox':'radio'}"
          :customRow="customRowFn"
          @change="handleTableChange">
          <span slot="themecolor" slot-scope="text, record">
            <span class="themecolor">{{text}}</span>
          </span>
           <span slot="trdnFlag" slot-scope="text, record">
            <span>{{text == 1 ? '是':'否'}}</span>
          </span>
          <span slot="lmtUsedFlag" slot-scope="text, record">
            <span v-if="text == 1">限制</span>
            <span v-else-if="text == 0">不限制</span>
            <span v-else>--</span>
          </span>
           <span slot="lmtUsedFlag" slot-scope="text, record">
            <span v-if="text == 1">限制</span>
            <span v-else-if="text == 0">不限制</span>
            <span v-else>--</span>
          </span>
          <span v-if="seeDetail" slot="action" slot-scope="text, record">
            <a class="see-detail" @click="handleDetail(record)">查看</a>

          </span>
          <span slot="setaction" slot-scope="text, record">
            <a @click.stop="handleSet(record,1)" v-if="record.commonFlag+'' === '0'">设置常用</a>
            <a @click.stop="handleSet(record,2)" v-else>取消常用</a>
          </span>
        </a-table>

      </a-col>
    
    </a-row>
    <div class="modal-footer">
        <a-button @click="cancel">关闭</a-button>
        <a-button @click="handleOk" v-if="!seeDetail" type="primary" style="margin-left:12px">确定</a-button>
    </div>
  </j-modal>
</template>

<script>
  import { getAction,postAction ,httpAction} from '@/api/manage'
  import Ellipsis from '@/components/Ellipsis'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { modalMinxin } from '@/mixins/modalMinxin'
  import { cloneObject, pushIfNotExist } from '@/utils/util'
  import Vue from 'vue'
  import { USER_DATA } from "@/store/mutation-types"
  import debounce from 'lodash/debounce';
  export default {
    name: 'JSelectBizComponentModal',
    mixins: [JeecgListMixin,modalMinxin],
    components: { Ellipsis },
    props: {
      
      miFlag:{
        type: String,
        default: '' 
      },
      pagesizenum:{
        type: Number,
        default: 5
      },
      value: {
        type: String,
        default: ''
      },
      visible: {
        type: Boolean,
        default: false
      },
      valueKey: {
        type: String,
        required: true
      },
      multiple: {
        type: Boolean,
        default: true
      },
      width: {
        type: Number,
        default: 1300
      },

      name: {
        type: String,
        default: ''
      },
      listUrl: {
        type: String,
        required: true,
        default: 'wh/patient/selectPatientPage'
      },
      pamaName: {
        type: String,
        default: 'approvalNumber'
      },
      // 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
      valueUrl: {
        type: String,
        default: ''
      },
      displayKey: {
        type: String,
        default: 'code'
      },
      columns: {
        type: Array,
        required: true,
        default: () => []
      },
      // 查询条件Code
      queryParamCode: {
        type: Array,
        default: null
      },
      // 查询条件文字
      queryParamText: {
        type: Array,
        default: null
      },
      //设置禁用对比字段，默认走的 rowKey 如果设置这个值，则以这个值为准，否则还是继续比对 rowKey
      tablerowKey:{
        type: String,
        default: ''
      },
      rowKey: {
        type: String,
        default: 'code'
      },
      // 过长裁剪长度，设置为 -1 代表不裁剪
      ellipsisLength: {
        type: Number,
        default: 24
      },
      //是否 有查看详情
      seeDetail: {
        type: Boolean,
        default: false
      },
      //禁用数组
      disabledArr:{
        type:Array,
        default: () => []
      },
      //中药已选择的数组
      chineseSelectedArr:{
        type:Array,
        default: () => []
      }
    },
    data() {
      
      return {
        tableDom:'#detailTable',
        isDetailShow:false,
        innerValue: '',
        // 已选择列表
        selectedTable: {
          
          scroll: { y: 240 },
          columns: [
            {
              ...this.columns[0],
              width: this.columns[0].widthRight || this.columns[0].width,
            },
            { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, }
          ],
          dataSource: [],
        },
        renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),
        url: { list: this.listUrl },
        /* 分页参数 */
        ipagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
        },
        options: [],
        dataSourceMap: {},
        disableMixinCreated:true,
        codeType:'9',
        hasTypeArr:['/menzhen/work/jiezhen','/menzhen/jiaofei/WhOutpatientMedicalRecordList','/menzhen/work/bingliMange','/menzhen/jiaofei/dianzichufang'],
        filters:{}
      }
    },
    computed: {
      // 表头
      innerColumns() {
        
        let columns = cloneObject(this.columns)
        // console.log(this.columns,this.listUrl,'444444')
        columns.forEach(column => {
          // console.log(column,'columnscolumnscolumnscolumns')
          // 给所有的列加上过长裁剪
          if (this.ellipsisLength !== -1 && !column.scopedSlots) {
            column.customRender = (text) => this.renderEllipsis(text)
          }
        })
        if(this.seeDetail){
          columns.unshift( { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'action' }, })
        }
        // if(this.$route.name == 'menzhen-jiaofei-WhOutpatientMedicalRecordList'){
        //   columns.unshift( { title: '操作', dataIndex: 'action', align: 'center', width: 60, scopedSlots: { customRender: 'setaction' }, })
        // }
        return columns
      },
      modalHaoCaiShow() {
          return this.$store.getters.modalHaoCaiShow;
      },
    },
    watch: {
      visible:{
        deep: true,
        immediate: true,
        handler(val) {
          var that = this;
          if(val){
            console.log(val,'watchvalvalvalvalval')
            // console.log(this.queryParam,'111')
            // this.innerValue = cloneObject('')
            this.selectedRowKeys = []
            this.dataSource = []
            this.keyDownObj.KEY_CODE=''
            this.selectedTable.dataSource = []

            this.innerValue = this.value
            this.selectedRowKeys = []
            this.$set(this.queryParam,this.pamaName, this.value)
            if(this.$route.name == 'yaofang-pandian-kucunList'){
              this.$set(this.queryParam,'showZero', 0)
            }
            this.loadData(1)
            this.$nextTick(function(){
             
              document.addEventListener('keydown',this.handleKeyPress);
            })
            // this.valueWatchHandler('')
            // this.loadData('')
          }
        }
      },
      // value: {
      //   deep: true,
      //   immediate: true,
      //   handler(val) {
      //    console.log(val,this.pamaName,'6599')
      //     this.innerValue = val
      //     this.selectedRowKeys = []
      //     this.queryParam[this.pamaName] = val
      //     console.log(this.pamaName,this.queryParam,val,'value')
      //   }
      // },
      dataSource: {
        deep: true,
        handler(val) {
          console.log(val,'dataSource')
          // this.emitOptions(val)
          // this.valueWatchHandler(this.innerValue)
        }
      },
      selectionRows: {
        immediate: true,
        deep: true,
        handler(val) {
          this.selectedTable.dataSource = val
        },
      },
      modalHaoCaiShow: {
        deep: true,
        handler(val) {
          console.log(val,'modalHaoCaiShow')
          document.removeEventListener('keydown',this.handleKeyPress);
          if(!val){
            document.addEventListener('keydown',this.handleKeyPress);
          }
          
        }
      },
    },
    beforeCreate(){
      
    },
    distroy(){
       document.removeEventListener('keydown',this.handleKeyPress);
    },
    methods: {
      typeChange(value){
        console.log(value,'typeChange')
        
        this.codeType = value.target.value
        Vue.ls.set('CODE_TYPE', this.codeType)
        this.filters.type = this.codeType
        this.loadData()
      },
      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
        }
        this.ipagination = pagination;
        this.selectedRowKeys = []
        this.loadData();
      },
      handleKeyPress(e){
        var that = this;

        
        console.log(e.keyCode ,this.keyDownObj.autoHaoCaiIndex,'handleKeyPress')
        // 回车
        if (e.keyCode === this.keyDownObj.KEY_CODE_ENTER && this.visible) {
          //如果是搜索 是聚焦状态，回车就是 筛选操作
          var inputFocus  = $('#weicaiform input').is(':focus')
          if(inputFocus){
            return
          }
          setTimeout(() => {
            //耗材单独处理
            if (this.seeDetail) {
              const obj = this.dataSource[this.keyDownObj.autoHaoCaiIndex];
              this.handleDetail(obj);
            } else {
              this.handleOk();
            }
          }, 200);
        }
         //向下
        if (e.keyCode == this.keyDownObj.KEY_CODE_DOWN) {
          console.log(this.tableDom,'tableDom')
          this.keyDownObj.KEY_CODE = 'KEY_CODE_DOWN'
          $('.table-page-search-wrapper input') && $('.table-page-search-wrapper input').blur()
          if(this.keyDownObj.autoHaoCaiIndex >= that.dataSource.length - 1){
            if($('.ant-pagination-next').hasClass('ant-pagination-disabled')){
              // this.$message.warning('已是最后一页！')
              return
            }
            
            this.keyChangePage('.ant-pagination-next')
            this.keyDownObj.autoHaoCaiIndex = 0;
          
          }else{
            this.removeActClassFromAllRows();
            if($('.van-toast').is(':visible')){
              return
            }
            this.keyDownObj.autoHaoCaiIndex++
            this.setActiveRowByIndex(this.keyDownObj.autoHaoCaiIndex);
          }
         
        }
        //向上
        if (e.keyCode == this.keyDownObj.KEY_CODE_UP) {
          this.keyDownObj.KEY_CODE = 'KEY_CODE_UP'
          $('.table-page-search-wrapper input') && $('.table-page-search-wrapper input').blur()
          if(this.keyDownObj.autoHaoCaiIndex <= 0){
            if(this.ipagination.current == 1){
              // this.$message.warning('已是第一页！')
              return
            }
            
            this.keyChangePage('.ant-pagination-prev')
            this.keyDownObj.autoHaoCaiIndex = that.ipagination.pageSize - 1;
            return
          }else{
            this.removeActClassFromAllRows();
            if($('.van-toast').is(':visible')){
              return
            }
            this.keyDownObj.autoHaoCaiIndex--
            this.setActiveRowByIndex(this.keyDownObj.autoHaoCaiIndex);
          }
        }
      
        // 左箭头
        if (e.keyCode == this.keyDownObj.KEY_CODE_LEFT) {
          this.keyDownObj.autoHaoCaiIndex = 0
          that.keyChangePage('.ant-pagination-prev')
        }
        // 右箭头
        if (e.keyCode == this.keyDownObj.KEY_CODE_RIGHT) {
          this.keyDownObj.autoHaoCaiIndex = 0
          that.keyChangePage('.ant-pagination-next')
         
        }
      },
     
      numChange(record){
        if(record.disabled){
          this.$message.error('已选择，请选择其他药品！')
          return false
        }
        let key = record[this.rowKey]
        if (!this.multiple) {
          this.selectedRowKeys = [key]
          this.selectedTable.dataSource = [record]
        } else {
          let index = this.selectedRowKeys.indexOf(key)
          if (index === -1) {
            this.selectedRowKeys.push(key)
            this.selectedTable.dataSource.push(record)
          } else {
            this.handleDeleteSelected(record, index)
          }
        }
      },
      getCheckboxProps: record => ({
        props: {
          disabled: record.disabled === true, // Column configuration not to be checked
          name: record.name,
        },
      }),
      handleDetail(records){
        // this.cancel()
        document.removeEventListener('keydown',this.handleKeyPress);
        this.$emit('okDetail', records)
      },
      handleSet(records,index){
        var that = this;
        let url = ''
        let metod = ''
        if(index == 1){
            url = 'wh/doctorWorkstation/addCommonDiagnosis/'
            metod = 'post'
        }else{
          url = 'wh/doctorWorkstation/cancelCommonDiagnosis/'
          metod = 'delete'
        }
        httpAction(url+records.diagnosisId,{},metod).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            this.loadData();
          }else{
            that.$message.warning(res.message);
          }
        })
      },
      searchQuery() {
        // console.log(this.listUrl,this.url.list,'searchQuery')
        // console.log(this.queryParam)
        // this.url.list = this.listUrl
        this.keyDownObj.KEY_CODE = '';
        this.loadData(1);
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },
      cancel(){
        console.log('cancel1')
        this.queryParam = {}
        document.removeEventListener('keydown',this.handleKeyPress);
        this.$emit('cancel')
        this.$emit('update:visible', false)
      },
      /** 关闭弹窗 */
      close() {
        console.log('cancel2')
        this.queryParam = {}
         document.removeEventListener('keydown',this.handleKeyPress);
        this.ipagination.current = 1;
       
        this.$emit('update:visible', false)
      },

      valueWatchHandler(val) {
        val.forEach(item => {
          this.dataSource.concat(this.selectedTable.dataSource).forEach(data => {
            if (data[this.valueKey] === item) {
              pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
            }
          })
        })
      },

      loadData(value) {
        var that = this;
       console.log(this.listUrl,this.url,'listUrllistUrllistUrllistUrllistUrllistUrllistUrl')
       if(value){
        this.ipagination.current = value
       }
       var pama = Object.assign({},this.queryParam,this.filters)
       pama.miFlag = this.miFlag
       pama.pageNo = this.ipagination.current
       pama.pageSize = this.ipagination.pageSize
        // return
        getAction(this.valueUrl || this.listUrl, pama).then((res) => {
          if (res.success) {
            let dataSource = res.result ? res.result :[]
            if (!(dataSource instanceof Array)) {
              dataSource = res.result.records
              that.ipagination.total = res.result.total
            }
            //如果医保名称没有 取name 并且需要医保code有值的前提下
            dataSource.forEach(obj => {
              if(obj.medicalCatalogCode && !obj.medicalCatalogName){
                obj.medicalCatalogName = obj.name; // 直接在原始对象上添加新的键值对
              }
              // console.log(this.disabledArr,'disabledArr')
              if(this.disabledArr && this.disabledArr.length){
                const object = this.disabledArr.find(value => value === obj[this.rowKey]);  
                if (object) {  
                  obj.disabled = true
                } 
              }
              
            });

            that.dataSource = dataSource
            //  console.log(dataSource,'dataSourcedataSourcedataSourcedataSource')
            // this.emitOptions(dataSource, (data) => {
            //   pushIfNotExist(this.innerValue, data[this.valueKey])
            //   pushIfNotExist(this.selectedRowKeys, data[this.rowKey])
            //   pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey)
            // })
            // if(this.ipagination.current == 1){
            //   that.keyDownObj.autoHaoCaiIndex = 0
            //   setTimeout(() => {
            //     that.setActiveRowByIndex(that.keyDownObj.autoHaoCaiIndex)
            //   }, 200);
            // }
            if(this.keyDownObj.KEY_CODE == 'KEY_CODE_UP'){
              that.keyDownObj.autoHaoCaiIndex = this.ipagination.pageSize-1
            }else{
              that.keyDownObj.autoHaoCaiIndex = 0
            }
            setTimeout(() => {
              that.removeActClassFromAllRows()
              that.setActiveRowByIndex(that.keyDownObj.autoHaoCaiIndex)
            }, 200);
          }else{
            that.$message.warning(res.message);
          }
        })
      },

      emitOptions(dataSource, callback) {

        // console.log(dataSource,'options, dataSourceMap')
        dataSource.forEach(data => {
          let key = data[this.valueKey]
          this.dataSourceMap[key] = data
          pushIfNotExist(this.options, { label: data[this.displayKey || this.valueKey], value: key }, 'value')
          typeof callback === 'function' ? callback(data) : ''
        })
        this.$emit('options', this.options, this.dataSourceMap)
      },
      // 检查合并后的数组是否包含受限的组合  
      findRestrictedCombination(mergedArr, lmtArr) {  
      
          const nameSet = new Set(mergedArr.map(item => encodeURI(item.name).replace("%E2%80%8C", '')));  
          // console.log(mergedArr, nameSet,lmtArr,'mergedArr, lmtArr')
          const restrictedCombinations = [];  
          console.log(mergedArr,lmtArr,'mergedArr, lmtArr333') 
          for (const { drugName, lmtDrugName,type } of lmtArr) {  
            
            const encodedDrugName = encodeURI(drugName);
            const encodedLmtDrugName = encodeURI(lmtDrugName);
            // console.log(nameSet.has(encodedDrugName),nameSet.has(encodedLmtDrugName),encodedDrugName,encodedLmtDrugName,drugName, lmtDrugName,'mergedArr, lmtArr22') 
              if (nameSet.has(encodedDrugName) && nameSet.has(encodedLmtDrugName)) { 
       
                  restrictedCombinations.push({ drugName, lmtDrugName,type});  
              }  
          }  
          
          return restrictedCombinations;  
      },
      validLimit(selectedArr) {
          if(selectedArr && selectedArr.length){

            const mergedArr = [...selectedArr, ...this.chineseSelectedArr];
            const chineseLmt = Vue.ls.get('chineseLmt');
            
            if(chineseLmt && chineseLmt.length){
              const restrictedCombinations = this.findRestrictedCombination(mergedArr, chineseLmt);
              if (restrictedCombinations.length > 0) {
                
                  const messages = [];  
                
                  for (const { drugName, lmtDrugName, type } of restrictedCombinations) {  
                    const typeName = type === 1 ? '十八反' : '十九畏';  
                    messages.push(`${typeName}中的【${drugName}】忌【${lmtDrugName}】`);  
                  }  
                  console.log('合并后的数组包含受限的组合:', messages);
                  return messages;  
                  
                  return restrictedCombinations;
              } else {
                  console.log('合并后的数组不包含受限的组合');
                  return [];
              }
            }else{
              return [];
            }
            
          }else{
            return [];
          }
      },
      volidMTB(arr){
        var that = this
        var limitArr = Vue.ls.get('MTBDATA')
        var selctedArr = arr
        
        if(limitArr && limitArr.length){
          const result =this.findMatchesWithMapping(selctedArr,limitArr)
          return result 
        } else{
          return []
        }
      },
      /**
       * 根据给定的映射规则在两个数组中找到匹配的元素
       *
       * @param sarr 待匹配的数组
       * @param storearr 存放待比较元素的数组
       * @param propertyMap 属性映射规则，键为待匹配数组中的属性名，值为存放数组中对应的属性名或映射函数
       * @param properties 待比较的属性数组
       * @returns 返回匹配的元素数组
     */
      findMatchesWithMapping(sarr, storearr, propertyMap, properties) {
          const matches = [];
      
          storearr.forEach(mtbItem => {
              sarr.forEach(drugItem => {
                  if (mtbItem.prodname === drugItem.name ||
                      mtbItem.hilist_name === drugItem.name ||
                      mtbItem.medins_list_name === drugItem.name ||
                      mtbItem.hilist_code === drugItem.medicalCatalogCode) {
                      if (!matches.some(matchedItem => matchedItem.name === drugItem.name)) {
                          matches.push(drugItem);
                      }
                  }
              });
          });
      
          return matches;
      },
      // 根据类型和受限组合生成提示信息的函数  
      
      /** 完成选择 */
      async handleOk() {
        const that = this
        //卫材的有detail
        if(this.seeDetail){
          this.close()
          return
        }
        // this.volidMTB(this.selectedTable.dataSource)
        // return false
        if(this.selectedTable.dataSource && this.selectedTable.dataSource.length){
          var selectedArr = await this.validLimit(this.selectedTable.dataSource)
          var selectedIsHasMtbArr = this.volidMTB(this.selectedTable.dataSource)
          console.log(selectedIsHasMtbArr,'selectedIsHasMtbArr')
          if(selectedIsHasMtbArr && selectedIsHasMtbArr.length && this.$route.path !='/menzhen/jiaofei/dianzichufang'){
            const textvalues = selectedIsHasMtbArr.map(obj => obj['name']);
            const textTips = textvalues.join(', ');
            this.$confirm({
                title: '提示',
                okText: '忽略',
                cancelText: '返回修改',
                icon: 'warning',
                content:'患者再近期已经购买过相同的慢特病药品【'+textTips+'】，是否继续？',
                onOk() { 
                  that.$emit('getv', that.selectedTable.dataSource)
                  that.close()
                },
                onCancel() {
                   
                },
            });
            return
          }
          if(selectedArr && selectedArr.length && this.chineseSelectedArr && this.chineseSelectedArr.length){
            // this.$message.error('存在受限的组合，请重新选择！')
            this.$confirm({
                title: '提示',
                okText: '忽略',
                cancelText: '返回修改',
                icon: 'warning',
                content: selectedArr.join(','),
                onOk() { 
                  that.$emit('getv', that.selectedTable.dataSource)
                  that.close()
                },
                onCancel() {
                   
                },
            });
            return false
          }else{
            that.$emit('getv', that.selectedTable.dataSource)
            that.close()
          }
          // let value = this.selectedTable.dataSource.map(data => data[this.valueKey])
          // console.log(value,this.valueKey)
          // this.$emit('input', this.selectedTable.dataSource)
         
        }else{
          this.$message.error('请选择')
        }
        
      },

      /** 删除已选择的 */
      handleDeleteSelected(record, index) {
        this.selectedRowKeys.splice(this.selectedRowKeys.indexOf(record[this.rowKey]), 1)
        this.selectedTable.dataSource.splice(index, 1)
      },

      customRowFn(record,index) {
        return {
          on: {
            click: () => {
              this.keyDownObj.autoHaoCaiIndex = index
              if(record.disabled){
                this.$message.error('已选择，请选择其他药品！')
                return false
              }
              let key = record[this.rowKey]
              if (!this.multiple) {
                this.selectedRowKeys = [key]
                this.selectedTable.dataSource = [record]
              } else {
                let index = this.selectedRowKeys.indexOf(key)
                if (index === -1) {
                  this.selectedRowKeys.push(key)
                  this.selectedTable.dataSource.push(record)
                } else {
                  this.handleDeleteSelected(record, index)
                }
              }
            }
          }
        }
      },

    }
  }
</script>
<style lang="less" scoped>
</style>